<script setup>
// 一键回收
import { ref,reactive,onMounted} from 'vue'
import { Plus } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { imgdeletApi, recoveryApi } from '../../api/index'
import { useStorage } from '@vueuse/core'
const fileList = ref([])
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const headerobj =ref({
    Token:useStorage('token').value
})
const data = reactive({
  Name: '',
  Phone: '',
  Address: '',
  Text: '',
  Thumbs:'',
})

const handlePictureCardPreview = (uploadFile) => {
  dialogImageUrl.value = uploadFile.url
  dialogVisible.value = true
}

const handSuccess = function (uploadFile,response) {
  if (uploadFile.code == 0) {
        ElMessage({
            message: uploadFile.msg,
            type: 'success',
         })
  } else {
    ElMessage.error(uploadFile.msg)
    fileList.value.pop()
  }
}

const imgdelet = async function (val) {
  const msg = await imgdeletApi({
    Path:val
  })
  if (msg.data.code == 0) {
      ElMessage({
            message: msg.data.msg,
            type: 'success',
         })
  }
}

// 删除图片
const handleRemove = function (uploadFile, uploadFiles) {
    // 删除图片找到删除的图片的路径，把路径给删除图片的接口
    if (uploadFile.response) {
      const startIndex = uploadFile.response.data.path.replace("http://adminapixz.tdzzxx.cn", "");
      imgdelet(startIndex)
    } else {
     
    }
}
const sumbit =async function () {
  const msg = await recoveryApi(data)
  if (msg.data.code == 0) {
    ElMessage({
        message: msg.data.msg,
        type: 'success',
    })
    data.Name = ''
    data.Phone = ''
    data.Address = ''
    data.Text = ''
    data.Thumbs = Date.now()
    fileList.value = []
  } else {
    ElMessage.error(msg.data.msg)
  }
}

onMounted(() => {
  data.Thumbs = Date.now()
})
</script>

<template>
    <!-- <div class="juanshu">
  <div class="juanshu_left"><img src="../../images/js.png"/></div>
  <div class="dianshu_right">
    <div class="btt">一键回收</div>
    <div style="float: left">
      <el-form :model="form" label-width="auto" >
      <el-form-item label="Activity name">
        <el-input v-model="data.Name" />
      </el-form-item>
      <el-form-item label="Activity name">
        <el-input v-model="data.Name" />
      </el-form-item>
    </el-form>
    </div>
    
    
  </div>
  nihao
    </div> -->
   
    <div class="huishou">
      <div style="width: 550px;">
        <div class="juanshu_left"><img src="../../images/js.png"/></div>
      </div>
      <div>
        <div>
        <div style="display: flex;height:50px;font-size:24px;font-weight: 600;justify-content: center;color: #FCBE00;">一键回收</div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
          <el-form-item label="姓名 :">
            <el-input style="width: 400px;" v-model="data.Name" />
          </el-form-item>
          <el-form-item label="手机号 :">
              <el-input  style="width: 400px;" v-model="data.Phone" />
          </el-form-item>
          <el-form-item  label="联系地址 :">
              <el-input style="width: 400px;" v-model="data.Address" />
          </el-form-item>
          <el-form-item label="备注 :">
              <el-input type="textarea" style="width: 400px;" v-model="data.Text" />
          </el-form-item>
          <el-form-item label="  ">
            请把回收物品拍照给我们，我们将及时联系您
          </el-form-item>
          <el-form-item label="上传图片 :">
            <el-upload
                v-model:file-list="fileList"
                action="http://adminapixz.tdzzxx.cn/API/Upload_AJAX/Img"
                :headers="headerobj"
                limit="8"
                :data="{Thumbs:data.Thumbs}"
                list-type="picture-card"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :on-success="handSuccess"
              >
                <el-icon><Plus /></el-icon>
            </el-upload>
          </el-form-item>
        </el-form>
        <div style="display: flex;height:50px;font-size:24px;font-weight: 600;justify-content: center;margin-top: 50px;">
          <el-button style="color: #fff;background-color: #FCBE00;width: 100px;height:40px" @click="sumbit">提交</el-button>
        </div>
        
        </div>
      </div>
      <el-dialog v-model="dialogVisible">
        <img w-full :src="dialogImageUrl" style="width: 100%;height:100%" alt="Preview Image" />
      </el-dialog>
    </div>
<div style="clear:both"></div>
</template>
<style scoped>
.huishou{
  width: 1140px;
  display: flex;
  margin: 30px auto;
  margin-top: 166px;
  background-color: #fff;
  box-shadow: 0 0 10px #ddd;
  padding: 30px;
}
</style>